<template>
  <div class="brandContainer">
    <h5>WILLE SEED VAULT</h5>
    <div class="b-main">
      <span class="b-top">
        <em class="lt">Contents:</em><em class="rt">Origin:</em>
      </span>
      <div class="b-title">
        <h3>Citrullus Lanatus</h3><em>TY3</em>
      </div>
      <div class="subtitle">
        Watermelon / 加持
      </div>
      <div class="b-detail">
        <i class="border_corner border_corner_left_top"></i>
        <i class="border_corner border_corner_right_top"></i>
        <i class="border_corner border_corner_left_bottom"></i>
        <i class="border_corner border_corner_right_bottom"></i>
        <span class="lt">
        <p>Account:<b>R.Kaji</b></p>
        <p>Ref:TY311070621</p>
        <p>Place:Tokyo-3,Japan</p>
        <p>Plece:20000</p>
      </span>
        <span class="rt"></span>
        <h4>JP-TY3-KSW</h4>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "brandPage"
}
</script>

<style scoped lang="scss">
$default-color: #9616ad;
.brandContainer {
  width: 500px;
  overflow: hidden;
  display: block;
  margin: 0 auto;

  em {
    font-style: normal;
  }

  h5 {
    color: $default-color;
    padding-bottom: 10px;
    text-align: left;
    border-bottom: 1px solid $default-color;
    margin: 0;
    margin-bottom: 5px;
  }

  .b-main {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    color: $default-color;
  }

  .lt {
    width: 50%;
    float: left;
    text-align: left;
  }

  .rt {
    width: 50%;
    float: right;
    text-align: right;
  }

  .b-top {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
  }

  .b-title {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 10px;

    h3 {
      width: 70%;
      float: left;
      background-color: $default-color;
      color: #fff;
      font-size: 20px;
      padding: 10px;
      text-align: left;
      margin: 0;
    }

    em {
      float: right;
      color: $default-color;
      font-size: 24px;
      padding-top: 6px;
      font-weight: bold;
    }
  }

  .subtitle {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    color: $default-color;
    text-align: left;
    font-size: 18px;
    border-bottom: 1px solid $default-color;
    padding-bottom: 5px;
    padding-left: 10px;
  }

  .b-detail {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    width: 96%;
    border-radius: 4px;
    padding: 5px 10px;

    p {
      margin: 5px;
      color: $default-color;
    }

    b {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .border_corner {
    z-index: 2500;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0);
    border: 2px solid $default-color;
  }

  .border_corner_left_top {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 0;
  }

  .border_corner_right_top {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-top-left-radius: 0;
  }

  .border_corner_left_bottom {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-top-left-radius: 0;
  }

  .border_corner_right_bottom {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-top-left-radius: 0;
  }

  h4 {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    font-size: 22px;
    color: $default-color;
    font-weight: bold;
  }
}

</style>